<template>
  <view>
    <view class="clist" v-if="item">
      <view class="x-row borderBottom top u-skeleton-fillet">
        <view class="x-col x-col-center code">
  进货单号：{{item.fOrderNo}}
        </view>
        <view class="x-col-center">
          <slot name="right"></slot>
        </view>
      </view>
      <view class="info borderBottom x-row">
        <view class="x-col">
          <view class="itxt u-skeleton-fillet" v-for="(item,index) in item.details" :key="index">
            {{item.label}}：{{item.value}}
          </view>
          <view class="itxt u-skeleton-fillet">
            应付款：¥ {{item.fMoney}}
          </view>
          <view class="itxt u-skeleton-fillet">
            已付款：¥ {{item.fPayMoney}}
          </view>
          <view class="itxt u-skeleton-fillet">
            待付款：¥ {{item.fWaitMoney}}
          </view>
		  <view class="itxt u-skeleton-fillet">
		    填报人： {{item.fUserName}}
		  </view>
          <view class="itxt u-skeleton-fillet">
            提交时间：{{item.fUpdateTime || item.fDeyTime}}
          </view>
        </view>
      <!--  <image @click="showImgs" class="photoShowIcon u-skeleton-fillet x-col-center"
          src="/static/photoShowIcon.png"></image> -->

      </view>
      <view class="store x-row">
        <image :src="$api.MrkImg(item.id)" class="u-skeleton-circle simg x-col-center">
        </image>
        <view class="x-col sname x-col-center u-skeleton-fillet">
          {{item.name}}
        </view>
        <slot name="button"> </slot>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: ''
    }
  },
  data() {
    return {
      img: this.urlimg
    }
  },
  methods: {
    showImgs() {
      this.$api.previewImgs(this.item.img, this.item.img[0])
    }
  }
}
</script>
<style  lang="scss" scoped>
.clist {
  margin-bottom: 16rpx;
  background-color: #ffffff;

  .top {
    padding: 34rpx 32rpx;
    box-sizing: border-box;

    .code {
      font-size: 32rpx;
      font-weight: 500;
      color: #34404a;
    }

    .state {
      font-size: 30rpx;
      font-weight: 400;
      color: #2b88fe;
    }
  }

  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;
    }

    .photoShowIcon {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 56rpx;
      height: 56rpx;
      margin-right: 24rpx;
      background-color: #f2f2f2;
    }

    .sname {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }
  }
}
</style>
